<template>
  <div class="call-back-form">
    <h2>
      ЗАПОЛНИ ФОРМУ
      <br>
      <span>
        и мы вышлем фин.модель на твою почту
      </span>
    </h2>
    <img src="../../assets/img/LineForm.png" height="2" width="257"/>
    <input type="text" placeholder="ИМЯ">
    <input type="tel" placeholder="ТЕЛЕФОН">
    <input type="email" placeholder="E-MAIL">
    <div class="conf-wrapper">
      <input type="checkbox" name="" id="">
      <p>
        я соглашаюсь с
        <br>
        <span>политикой конфидициальности</span>
      </p>
    </div>
    <input type="submit" @click.prevent="$emit('showModal')" value="ОТПРАВИТЬ"/>
  </div>
</template>
<script setup>
import {defineProps, onMounted} from "vue";

const props = defineProps({
  showModal: {
    type: Boolean
  },
  name: {
    type: Boolean
  },
  tel: {
    type: Boolean
  },
  email: {
    type: Boolean
  }
})

</script>
<style scoped lang="scss">
.call-back-form {
  //scale: 1.2;
  display: grid;
  justify-content: center;
  grid-row-gap: 23px;
  width: 300px;
  height: 352px;

  h2 {
    white-space: nowrap;
    width: 256px;
    margin: 0px;
    text-align: center;
    font-size: 24px;
    line-height: 18px;
    color: #D29C4E;

    span {
      //text-align: center;
      width: fit-content;
      line-height: 24px;
      font-size: 16px;
      color: #FFFFFF;
    }
  }
  hr {
    color: #D29C4E;
  }
  .conf-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    input {
      height: 27px;
      width: 27px;
      clip-path: none;
      border: 3px solid #D29C4E;
      cursor: pointer;
    }
    p {
      font-size: 15px;
      color: #FFFFFF;
      span {
        color: #D29C4E;
      }
    }
  }
  input {
    font-size: 18px;
    height: 50px;
    width: 256px;
    border: none;
    text-indent: 20px;
    caret-color: #FFFFFF;
    background: url("../../assets/img/Vector.png");
    background-repeat: no-repeat;
    //padding-left: 20px;
    //clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
  }
  input:focus {
    outline: 0;
    border: none;
    box-shadow: none;
    background: url("../../assets/img/Vector.png");
    background-repeat: no-repeat;
  }
  input[type="submit"] {
    text-indent: unset;
    width: 252px;
    height: 36px;
    border: none;
    border-radius: 25px;
    background: #D29C4E;
    color: #FFFFFF;
    transition: 0.3s;
  }
  input[type="submit"]:hover {
    cursor: pointer;
    scale: 1.1;
  }
}
</style>